iT邦幫忙

2021 iThome 鐵人賽
DAY 18
0
自我挑戰組

我要成為全端王!系列 第 18 篇

全端入門Day18_前端程式撰寫之CSS終

13th鐵人賽
725 瀏覽

  • 分享至 

  • xImage
    •  

昨天介紹了些F12的功能，今天要來說CSS的框架。

CSS的框架：Bootstrap

因為我目前碰的CSS框架只有Bootstrap，所以就只介紹它，不然其實還有其他框架可以使用，那麼要怎麼使用呢?

  1. 首先進入到Bootstrap官網之後點Get Start，進去之後會往下一點會看到CSS
    https://ithelp.ithome.com.tw/upload/images/20210902/20140126Onlhi9BIMT.jpg

點copy之後貼在VS code裡面的HTML檔案，並且要貼在head裡面喔! 如果貼在body是會沒有效果的

你會發現好長看不到後面，所以我們就案shift+alt+f，就能夠完美幫我們排版了
https://ithelp.ithome.com.tw/upload/images/20210902/20140126JB4cJWNZ3H.jpg
那麼接下來看怎麼使用了：
在body裡面新增這些東西，我們方便去看有了Bootstrapc會有什麼功能https://ithelp.ithome.com.tw/upload/images/20210902/20140126r43q7UC9zO.jpg
一樣存檔，之後打開index.html，我們會到這樣
https://ithelp.ithome.com.tw/upload/images/20210902/20140126JP3eE8lrEl.jpg
我們按F12並且移動到最左邊，就會發現差別了
https://ithelp.ithome.com.tw/upload/images/20210902/20140126ZyKRlaIh4E.jpg

這就是使用框架的好處，可以讓我們少打很多程式碼，並且達到了RWD的功能。

大約的把CSS介紹完，明天就會是新的篇章JavaScript了!


上一篇
全端入門Day17_前端程式撰寫之F12
下一篇
全端入門Day19_前端程式撰寫之JavaScript
系列文
我要成為全端王! 共 30 篇
  1. 26
    全端入門Day26_後端程式撰寫之Django
  2. 27
    全端入門Day27_後端程式撰寫之Golang
  3. 28
    全端入門Day28_後端程式撰寫之一點的Golang
  4. 29
    全端入門Day29_後端程式撰寫之一點點的Golang
  5. 30
    全端入門Day30_結尾
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙